<!-- Background color start -->
<section id="backColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h4 class="text-uppercase">Teal Background Color</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 text-white bg-teal">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="white mb-0"><strong>Teal Color</strong></p>
                        <p class="card-title">.bg-teal</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title"><small class="float-right">#009688</small></p>
                    </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-teal bg-lighten-1 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Lighten 1</strong><small class="text-muted float-right">#26A69A</small></p>
                        <p class="mb-0">.bg-teal.bg-lighten-1</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-teal bg-lighten-2 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Lighten 2</strong><small class="text-muted float-right">#4DB6AC</small></p>
                        <p class="mb-0">.bg-teal.bg-lighten-2</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-teal bg-lighten-3 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Lighten 3</strong><small class="text-muted float-right">#80CBC4</small></p>
                        <p class="mb-0">.bg-teal.bg-lighten-3</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-teal bg-lighten-4 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Lighten 4</strong><small class="text-muted float-right">#B2DFDB</small></p>
                        <p class="mb-0">.bg-teal.bg-lighten-4</p>              
                    </div>
                </div>    
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-teal bg-darken-1 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Darken 1</strong><small class="text-muted float-right">#00897B</small></p>
                        <p class="mb-0">.bg-teal.bg-darken-1</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-teal bg-darken-2 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Darken 2</strong><small class="text-muted float-right">#00796B</small></p>
                        <p class="mb-0">.bg-teal.bg-darken-2</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-teal bg-darken-3 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Darken 3</strong><small class="text-muted float-right">#00695C</small></p>
                        <p class="mb-0">.bg-teal.bg-darken-3</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-teal bg-darken-4 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Darken 4</strong><small class="text-muted float-right">#004D40</small></p>
                        <p class="mb-0">.bg-teal.bg-darken-4</p>              
                    </div>
                </div>    
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-teal bg-accent-1 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Accent 1</strong><small class="text-muted float-right">#A7FFEB</small></p>
                        <p class="mb-0">.bg-teal.bg-accent-1</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-teal bg-accent-2 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Accent 2</strong><small class="text-muted float-right">#64FFDA</small></p>
                        <p class="mb-0">.bg-teal.bg-accent-2</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-teal bg-accent-3 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Accent 3</strong><small class="text-muted float-right">#1DE9B6</small></p>
                        <p class="mb-0">.bg-teal.bg-accent-3</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-teal bg-accent-4 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Accent 4</strong><small class="text-muted float-right">#00BFA5</small></p>
                        <p class="mb-0">.bg-teal.bg-accent-4</p>          
                    </div>
                </div>    
            </div>
        </div>
    </div>    
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                    <h4 class="card-title">Teal Palette Classes</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <p>Teal color palette contains 13 colors: 1 main teal color and 4 lighten colors, 4 darken colors and  4 Accent colors. All colors works perfectly with any bootstrap components, form components or any modern controls, that makes Modern very effective, flexible and configurable.</p>
                        <p class="mt-1"><strong>Please note:</strong> You can use .bg-teal and .btn-teal as main colors, but if you want to use lighten, darken or accent colors, use bg-* bg-lighten-NUMBER for lighten color, bg-* bg-darken-NUMBER for darken color  and bg-* bg-accent-NUMBER for accent colors.</p>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-bordeteal">
                                    <thead>
                                        <tr>
                                            <th style="width: 30%;">Class</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.bg-teal</code></td>
                                            <td>Teal Class for background color.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.bg-teal</code><br><code>.bg-lighten-*</code></td>
                                            <td>For <code>lighten</code> teal background color, this two classes needed. Here *: 1,2,3,4 lighten teal color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.bg-teal</code><br><code>.bg-darken-*</code></td>
                                            <td>For <code>darken</code> teal background color, this two classes needed. Here *: 1,2,3,4 darken teal color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.bg-teal</code><br><code>.bg-accent-*</code></td>
                                            <td>For <code>accent</code> teal background color, this two classes needed. Here *: 1,2,3,4 accent teal color options.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h4 class="text-uppercase">Teal Border Color</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-teal">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Teal Color</strong></p>
                        <p class="card-title">.border-teal</p>
                    </div>
                        <div class="float-right">
                            <p class="card-title"><small class="float-right">#009688</small></p>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-1 border-teal border-lighten-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Lighten 1</strong><small class="text-muted float-right">#26A69A</small></p>
                        <p class="mb-0">.border-teal.border-lighten-1</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-teal border-lighten-2">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Lighten 2</strong><small class="text-muted float-right">#4DB6AC</small></p>
                        <p class="mb-0">.border-teal.border-lighten-2</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-teal border-lighten-3">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Lighten 3</strong><small class="text-muted float-right">#80CBC4</small></p>
                        <p class="mb-0">.border-teal.border-lighten-3</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-teal border-lighten-4">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Lighten 4</strong><small class="text-muted float-right">#B2DFDB</small></p>
                        <p class="mb-0">.border-teal.border-lighten-4</p>              
                    </div>
                </div>    
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-1 border-teal border-darken-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Darken 1</strong><small class="text-muted float-right">#00897B</small></p>
                        <p class="mb-0">.border-teal.border-darken-1</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-teal border-darken-2">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Darken 2</strong><small class="text-muted float-right">#00796B</small></p>
                        <p class="mb-0">.border-teal.border-darken-2</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-teal border-darken-3">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Darken 3</strong><small class="text-muted float-right">#00695C</small></p>
                        <p class="mb-0">.border-teal.border-darken-3</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-teal border-darken-4">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Darken 4</strong><small class="text-muted float-right">#004D40</small></p>
                        <p class="mb-0">.border-teal.border-darken-4</p>       
                    </div>
                </div>    
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-1 border-teal border-accent-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Accent 1</strong><small class="text-muted float-right">#A7FFEB</small></p>
                        <p class="mb-0">.border-teal.border-accent-1</p>       
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-teal border-accent-2">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Accent 2</strong><small class="text-muted float-right">#64FFDA</small></p>
                        <p class="mb-0">.border-teal.border-accent-2</p>       
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-teal border-accent-3">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Accent 3</strong><small class="text-muted float-right">#1DE9B6</small></p>
                        <p class="mb-0">.border-teal.border-accent-3</p>       
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-teal border-accent-4">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Accent 4</strong><small class="text-muted float-right">#00BFA5</small></p>
                        <p class="mb-0">.border-teal.border-accent-4</p>       
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Teal Border Classes</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-bordeteal">
                                    <thead>
                                        <tr>
                                            <th style="width: 30%;">Class</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.border-teal</code></td>
                                            <td>Teal Class for background color.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-teal</code><br><code>.border-lighten-*</code></td>
                                            <td>For lighten teal background color, this two classes needed. Here *: 1,2,3,4 lighten teal color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-top-teal</code><br><code>.border-top-lighten-*</code></td>
                                            <td>For lighten teal <code>top</code> border. Use this classes if you need to highlight only top border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-bottom-teal</code><br><code>.border-bottom-lighten-*</code></td>
                                            <td>For lighten teal <code>bottom</code> border. Use this classes if you need to highlight only bottom border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-right-teal</code><br><code>.border-right-lighten-*</code></td>
                                            <td>For lighten teal <code>right</code> border. Use this classes if you need to highlight only right border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-left-teal</code><br><code>.border-left-lighten-*</code></td>
                                            <td>For lighten teal <code>left</code> border. Use this classes if you need to highlight only left border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-teal</code><br><code>.border-darken-*</code></td>
                                            <td>For darken teal background color, this two classes needed. Here *: 1,2,3,4 darken teal color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-top-teal</code><br><code>.border-top-darken-*</code></td>
                                            <td>For darken teal <code>top</code> border. Use this classes if you need to highlight only top border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-bottom-teal</code><br><code>.border-bottom-darken-*</code></td>
                                            <td>For darken teal <code>bottom</code> border. Use this classes if you need to highlight only bottom border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-right-teal</code><br><code>.border-right-darken-*</code></td>
                                            <td>For darken teal <code>right</code> border. Use this classes if you need to highlight only right border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-left-teal</code><br><code>.border-left-darken-*</code></td>
                                            <td>For darken teal <code>left</code> border. Use this classes if you need to highlight only left border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-teal</code><br><code>.border-accent-*</code></td>
                                            <td>For accent teal background color, this two classes needed. Here *: 1,2,3,4 accent teal color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-top-teal</code><br><code>.border-top-accent-*</code></td>
                                            <td>For accent teal <code>top</code> border. Use this classes if you need to highlight only top border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-bottom-teal</code><br><code>.border-bottom-accent-*</code></td>
                                            <td>For accent teal <code>bottom</code> border. Use this classes if you need to highlight only bottom border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-right-teal</code><br><code>.border-right-accent-*</code></td>
                                            <td>For accent teal <code>right</code> border. Use this classes if you need to highlight only right border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-left-teal</code><br><code>.border-left-accent-*</code></td>
                                            <td>For accent teal <code>left</code> border. Use this classes if you need to highlight only left border.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h4 class="text-uppercase">Teal Text Color</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Teal Color</strong></p>
                        <p class="card-title">.teal</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title mb-0 teal"><small class="float-right">#009688</small></p>
                    </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Lighten 1</strong><small class="text-muted float-right teal">#26A69A</small></p>
                        <p class="mb-0">.teal.lighten-1</p>       
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Lighten 2</strong><small class="text-muted float-right teal lighten-2">#4DB6AC</small></p>
                        <p class="mb-0">.teal.lighten-2</p>       
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Lighten 3</strong><small class="text-muted float-right teal lighten-3">#80CBC4</small></p>
                        <p class="mb-0">.teal.lighten-3</p>       
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Lighten 4</strong><small class="text-muted float-right teal lighten-4">#B2DFDB</small></p>
                        <p class="mb-0">.teal.lighten-4</p>       
                    </div>
                </div>    
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Darken 1</strong><small class="text-muted float-right teal darken-1">#00897B</small></p>
                        <p class="mb-0">.teal.darken-1</p>     
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Darken 2</strong><small class="text-muted float-right teal darken-2">#00796B</small></p>
                        <p class="mb-0">.teal.darken-2</p>     
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Darken 3</strong><small class="text-muted float-right teal darken-3">#00695C</small></p>
                        <p class="mb-0">.teal.darken-3</p>     
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Darken 4</strong><small class="text-muted float-right teal darken-4">#004D40</small></p>
                        <p class="mb-0">.teal.darken-4</p>     
                    </div>
                </div>    
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Accent 1</strong><small class="text-muted float-right teal accent-1">#A7FFEB</small></p>
                        <p class="mb-0">.teal.accent-1</p>     
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Accent 2</strong><small class="text-muted float-right teal accent-2">#64FFDA</small></p>
                        <p class="mb-0">.teal.accent-2</p>     
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Accent 3</strong><small class="text-muted float-right teal accent-3">#1DE9B6</small></p>
                        <p class="mb-0">.teal.accent-3</p>     
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Teal Accent 4</strong><small class="text-muted float-right teal accent-4">#00BFA5</small></p>
                        <p class="mb-0">.teal.accent-4</p>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Teal Text Classes</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-bordeteal">
                                    <thead>
                                        <tr>
                                            <th style="width: 30%;">Class</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.teal</code></td>
                                            <td>Class for Teal Text color.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.teal</code><br><code>.lighten-*</code></td>
                                            <td>For <code>lighten</code> teal text color, this two classes needed. Here *: 1,2,3,4 for lighten teal color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.teal</code><br><code>.darken-*</code></td>
                                            <td>For <code>darken</code> teal text color, this two classes needed. Here *: 1,2,3,4 for darken teal color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.teal</code><br><code>.accent-*</code></td>
                                            <td>For <code>accent</code> teal text color, this two classes needed. Here *: 1,2,3,4 for accent teal color options.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->